<template>
  <div>
    <el-row :gutter="50" class="panel-group">
      <el-col :span="6">
        <el-card body-style="padding: 0" class="card-panel">
          <div class="card-panel-icon-wrapper">
            <SvgIcon class-name="card-panel-icon" icon-class="pv" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日访问量</div>
            <span class="card-panel-num">{{ pv }}</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card body-style="padding: 0" class="card-panel">
          <div class="card-panel-icon-wrapper">
            <SvgIcon class-name="card-panel-icon" icon-class="yonghu" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日独立访问量</div>
            <span class="card-panel-num">{{ uv }}</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card body-style="padding: 0" class="card-panel">
          <div class="card-panel-icon-wrapper">
            <SvgIcon class-name="card-panel-icon" icon-class="article" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">发布文章数量</div>
            <span class="card-panel-num">{{ blogCount }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="panel-group">
      <el-col :span="8">
        <el-card>
          <div ref="categoryEcharts" style="height: 500px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div ref="tagEcharts" style="height: 500px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div ref="mapEcharts" style="height: 500px"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="panel-group">
      <div ref="visitRecordEcharts" style="height: 500px"></div>
    </el-card>
  </div>
</template>

<script>
  import { getDashboard } from '@/api/dashboard'
  import SvgIcon from '@/components/SvgIcon'
  import geoCoordMap from '@/util/city2coord.json'
  import echarts from 'echarts'
  import 'echarts/map/js/china'

  export default {
    name: 'Dashboard',
    components: { SvgIcon },
    data() {
      return {
        pv: 0,
        uv: 0,
        blogCount: 0,
        commentCount: 0,
        categoryEcharts: null,
        tagEcharts: null,
        mapEcharts: null,
        visitRecordEcharts: null,
        categoryOption: {
          title: {
            text: '分类下文章数量',
            x: 'center',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            left: 'center',
            top: 'bottom',
            data: [],
          },
          series: [
            {
              name: '文章数量',
              type: 'pie',
              radius: [30, 110],
              roseType: 'area',
              data: [],
            },
          ],
        },
        tagOption: {
          title: {
            text: '标签下文章数量',
            x: 'center',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            left: 'center',
            top: 'bottom',
            data: [],
          },
          series: [
            {
              name: '文章数量',
              top: '-10%',
              type: 'pie',
              radius: [30, 110],
              roseType: 'area',
              data: [],
            },
          ],
        },
        mapOption: {
          title: {
            text: '访客地图',
            x: 'center',
          },
          tooltip: {
            show: false,
          },
          geo: {
            map: 'china',
            roam: false, //关闭拖拽
            zoom: 1.24,
            center: [104.2, 36], //调整地图位置
            label: {
              normal: {
                show: false, //关闭省份名展示
                fontSize: '10',
                color: 'rgba(0,0,0,0.7)',
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: '#0d0059',
                borderColor: '#389dff',
                borderWidth: 1, //设置外层边框
                shadowBlur: 5,
                shadowOffsetY: 8,
                shadowOffsetX: 0,
                shadowColor: '#01012a',
              },
              emphasis: {
                areaColor: '#184cff',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 5,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
          series: [
            {
              type: 'map',
              map: 'china',
              roam: false,
              zoom: 1.24,
              center: [104.2, 36],
              showLegendSymbol: false,
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              itemStyle: {
                normal: {
                  areaColor: '#0d0059',
                  borderColor: '#389dff',
                  borderWidth: 0.5,
                },
                emphasis: {
                  areaColor: '#17008d',
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 5,
                  borderWidth: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
            {
              name: '',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: [],
              symbol: 'circle',
              symbolSize: 5,
              hoverSymbolSize: 10,
              tooltip: {
                formatter(value) {
                  return value.data.name + '<br/>' + '访客数：' + value.data.uv
                },
                show: true,
              },
              encode: {
                value: 2,
              },
              label: {
                formatter: '{b}',
                position: 'right',
                show: false,
              },
              itemStyle: {
                color: '#0efacc',
              },
              emphasis: {
                label: {
                  show: false,
                },
              },
            },
            {
              name: 'Top 5',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: [],
              symbol: 'circle',
              symbolSize: 12,
              tooltip: {
                formatter(value) {
                  return value.data.name + '<br/>' + '访客数：' + value.data.uv
                },
                show: true,
              },
              encode: {
                value: 2,
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke',
                color: '#0efacc',
                period: 9,
                scale: 5,
              },
              hoverAnimation: true,
              label: {
                formatter: '{b}',
                position: 'right',
                show: true,
              },
              itemStyle: {
                color: '#0efacc',
                shadowBlur: 2,
                shadowColor: '#333',
              },
              zlevel: 1,
            },
          ],
        },
        visitRecordOption: {
          xAxis: {
            data: [],
            boundaryGap: false,
            axisTick: {
              show: false,
            },
          },
          grid: {
            left: 10,
            right: 20,
            top: 30,
            bottom: 0,
            containLabel: true,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
            },
            padding: [5, 10],
          },
          yAxis: {
            axisTick: {
              show: false,
            },
          },
          legend: {
            data: ['访问量(PV)', '独立访客(UV)'],
          },
          series: [
            {
              name: '访问量(PV)',
              smooth: true,
              type: 'line',
              itemStyle: {
                normal: {
                  color: '#FF005A',
                  lineStyle: {
                    color: '#FF005A',
                    width: 2,
                  },
                },
              },
              data: [],
              animationDuration: 2800,
              animationEasing: 'cubicInOut',
            },
            {
              name: '独立访客(UV)',
              smooth: true,
              type: 'line',
              itemStyle: {
                normal: {
                  color: '#3888fa',
                  lineStyle: {
                    color: '#3888fa',
                    width: 2,
                  },
                  areaStyle: {
                    color: '#f3f8ff',
                  },
                },
              },
              data: [],
              animationDuration: 2800,
              animationEasing: 'quadraticOut',
            },
          ],
        },
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        getDashboard().then((res) => {
          if (res.code === 200) {
            this.pv = res.data.pv
            this.uv = res.data.uv
            this.blogCount = res.data.blogCount
            this.commentCount = res.data.commentCount
            //渲染分类数据
            this.categoryOption.legend.data = res.data.category.legend
            this.categoryOption.series[0].data = res.data.category.series
            this.initCategoryEcharts()
            //渲染标签数据
            this.tagOption.legend.data = res.data.tag.legend
            this.tagOption.series[0].data = res.data.tag.series
            this.initTagEcharts()
            //渲染访客地图数据
            let mapData = this.convertData(res.data.cityVisitor)
            this.mapOption.series[1].data = mapData
            this.mapOption.series[2].data = mapData.splice(0, 5)
            this.initMapEcharts()
            //渲染一周访问量数据
            this.visitRecordOption.xAxis.data = res.data.visitRecord.date
            this.visitRecordOption.series[0].data = res.data.visitRecord.pv
            this.visitRecordOption.series[1].data = res.data.visitRecord.uv
            this.initVisitRecordEcharts()
          }
        })
      },
      initCategoryEcharts() {
        this.categoryEcharts = echarts.init(this.$refs.categoryEcharts, 'light')
        this.categoryEcharts.setOption(this.categoryOption)
      },
      initTagEcharts() {
        this.tagEcharts = echarts.init(this.$refs.tagEcharts, 'light')
        this.tagEcharts.setOption(this.tagOption)
      },
      initMapEcharts() {
        this.mapEcharts = echarts.init(this.$refs.mapEcharts)
        this.mapEcharts.setOption(this.mapOption)
      },
      convertData(data) {
        let res = []
        for (let i = 0; i < data.length; i++) {
          let geoCoord = geoCoordMap[data[i].city]
          if (geoCoord) {
            res.push({
              name: data[i].city,
              value: geoCoord,
              uv: data[i].uv,
            })
          }
        }
        return res
      },
      initVisitRecordEcharts() {
        this.visitRecordEcharts = echarts.init(this.$refs.visitRecordEcharts)
        this.visitRecordEcharts.setOption(this.visitRecordOption)
      },
    },
  }
</script>

<style scoped>
  .panel-group {
    margin-bottom: 30px;
  }

  .panel-group .card-panel {
    height: 108px;
    position: relative;
    overflow: hidden;
  }

  .panel-group .card-panel .card-panel-icon-wrapper {
    float: left;
    margin: 14px 0 0 14px;
    padding: 16px;
  }

  .panel-group .card-panel .card-panel-icon {
    float: left;
    font-size: 48px;
  }

  .panel-group .card-panel .card-panel-description {
    float: right;
    font-weight: 700;
    margin: 26px 26px 26px 0;
  }

  .panel-group .card-panel .card-panel-description .card-panel-text {
    color: rgba(0, 0, 0, 0.45);
    font-size: 16px;
    margin-bottom: 12px;
  }

  .panel-group .card-panel .card-panel-description .card-panel-num {
    font-size: 20px;
  }
</style>
